<template>
  <div class="memberList">
    <van-nav-bar
      title="部门成员"
      left-arrow
      @click-left="goBackHandle"
      :fixed="true"
      :border="false"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
    </van-nav-bar>
    <div class="dataContent">
      <div class="contentTop"></div>
      <van-loading size="30px" vertical v-if="Loading"> 加载中.. </van-loading>
      <div v-else>
        <div class="noData" v-if="!memberData">
          <div v-show="showImg">
            <img :src="require('../../assets/noData.png')" alt="" />暂无数据
          </div>
        </div>
        <div v-else>
          <div
            class="content"
            v-for="(item, index) in memberData"
            :key="index"
            @click="clickMember(item)"
          >
            <van-icon name="user-circle-o" size="16" />
            <span>{{ item.Name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footerDiv" v-if="role == 2"></div>
    <div class="footer" v-if="role == 2">
      <van-button type="default" @click="click">添加成员</van-button>
    </div>
  </div>
</template>
<script>
import backMixin from '@/backMixin'
export default {
  name: 'memberList',
  mixins: [backMixin],
  data() {
    return {
      memberData: [],
      pageSize: '20',
      page: '1',
      deptId: '',
      showImg: false,
      Loading: true,
      role: ''
    }
  },
  created() {
    this.role = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).role
    this.deptId = this.$route.params.DeptId
    // 如果不是从成员管理页面跳转过来的
    if (!this.deptId) {
      // 部门id从缓存中获取
      this.deptId = window.localStorage.getItem('deptId')
    }
    this.getMemberData()
  },
  mounted() {},
  methods: {
    // 获取成员列表
    getMemberData() {
      this.$axios({
        url: '/attendance-api/employee-query-list',
        method: 'get',
        params: {
          pageSize: 0,
          page: 1,
          deptId: this.deptId,
          role: ''
        }
      }).then(res => {
        console.log(res)
        if (res) {
          this.memberData = res.data.Object.List
          console.log(this.memberData)
          this.Loading = false
          if (this.memberData) {
            this.showImg = false
          } else {
            this.showImg = true
          }
        }
      })
    },
    // 点击返回按钮
    goBackHandle() {
      this.$router.go(-1)
    },
    // 点击成员
    clickMember(val) {
      console.log(val)
      window.localStorage.setItem('deptId', this.deptId)
      // 跳转到编辑成员页面
      this.$router.push({
        name: 'addMember',
        params: {
          ifNewMember: false,
          memberInfo: val
        }
      })
    },
    // 点击添加成员，跳转页面
    click() {
      // 当前部门id是有数据的，缓存部门id
      window.localStorage.setItem('deptId', this.deptId)
      // 跳转到编辑成员页面
      this.$router.push({
        name: 'addMember',
        params: {
          ifNewMember: true,
          deptId: this.deptId,
          deptAddMember: true
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.memberList:deep {
  margin: 0;
  padding: 0;
  text-align: left;
  height: 100%;
  overflow: auto;
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .dataContent {
    // background-color: #f5f5f5;
    .van-loading {
      margin-top: 200px;
      text-align: center;
      z-index: 300;
    }
    .contentTop {
      margin-top: 56px;
    }
    .content {
      padding: 10px 0;
      margin: 0 16px;
      border-bottom: 1px solid #ddd;
      .van-icon {
        margin-right: 10px;
      }
    }
    .content:last-child {
      border: 0;
    }
  }
  .noData {
    width: 343px;
    font-size: 13px;
    color: #999999;
    background: #fff;
    border-radius: 9px;
    margin: 20px auto;
    padding-top: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 254px;
      height: 290px;
      display: block;
      margin: 0 auto;
    }
  }
  .footerDiv {
    height: 64px;
  }
  .footer {
    background-color: #fff;
    height: 64px;
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    .van-button {
      flex: 1;
      margin: 10px 16px;
      background-color: #006dff;
      color: #fff;
      font-size: 16px;
      border-radius: 10px;
      border: 0;
    }
  }
}
</style>
